<template>
    <div class="flex-fill">
        <div class="v-container">
            <div class="v-card">
                <div class="user-table-card">
                    <div class="v-table" v-loading="loading">
                        <div class="top">
                            <!-- 搜索栏 -->
                            <div class="search-bar">
                                <el-input v-model="searchQuery" placeholder="搜索用户名/昵称" class="search-input"
                                    @keyup.enter="handleSearch">
                                    <template #prefix>
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </template>
                                </el-input>
                                <el-button type="primary" @click="handleSearch">搜索</el-button>
                            </div>
                            <div class="top-right">
                                <div class="refresh" @click="reloadUsers">刷新</div>
                                <div class="total">共 {{ total }} 条</div>
                            </div>
                        </div>
                        <div class="v-table__wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th style="min-width: 90px;">UID</th>
                                        <th style="min-width: 80px;">头像</th>
                                        <th style="min-width: 120px;">用户名</th>
                                        <th style="min-width: 120px;">昵称</th>
                                        <th style="min-width: 150px;">注册时间</th>
                                        <th style="min-width: 100px;">状态</th>
                                        <th style="min-width: 150px;">操作</th>
                                    </tr>
                                </thead>
                                <tbody v-if="users.length != 0">
                                    <tr v-for="(user, index) in users" :key="index">
                                        <td># {{ user.uid }}</td>
                                        <td>
                                            <el-avatar :size="40" :src="user.avatar" />
                                        </td>
                                        <td>{{ user.username }}</td>
                                        <td>{{ user.nickname }}</td>
                                        <td>{{ user.registerDate }}</td>
                                        <td>
                                            <el-tag :type="user.status === 1 ? 'success' : 'danger'">
                                                {{ user.status === 1 ? '正常' : '禁用' }}
                                            </el-tag>
                                        </td>
                                        <td>
                                            <el-button type="primary" size="small"
                                                @click="handleEdit(user)">编辑</el-button>
                                            <el-button :type="user.status === 1 ? 'danger' : 'success'" size="small"
                                                @click="handleStatusChange(user)">{{ user.status === 1 ? '禁用' : '启用'
                                                }}</el-button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="no-more" v-if="!loading && users.length == 0">
                                <img src="@/assets/img/silly.png" alt="">
                                <span>没有找到任何数据</span>
                            </div>
                        </div>
                        <div class="v-table-page">
                            <el-pagination background layout="prev, pager, next" :total="total" :page-size="10"
                                :pager-count="pagerCount" :current-page="page" @current-change="pageChange" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑用户对话框 -->
        <el-dialog v-model="dialogVisible" title="编辑用户信息" width="500px">
            <el-form :model="editingUser" label-width="100px">
                <el-form-item label="用户名">
                    <el-input v-model="editingUser.username" disabled />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="editingUser.nickname" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="editingUser.email" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

const users = ref([]);
const page = ref(1);
const total = ref(0);
const pagerCount = ref(7);
const loading = ref(true);
const searchQuery = ref('');
const dialogVisible = ref(false);
const editingUser = ref({});

// 获取用户列表
const getUsers = async () => {
    loading.value = true;
    try {
        // 这里替换为实际的API调用
        // const res = await getUserList(page.value, 10, searchQuery.value);
        // users.value = res.data.records;
        // total.value = res.data.total;

        // 模拟数据
        users.value = [
            {
                uid: 1,
                username: 'user1',
                nickname: '用户1',
                avatar: '',
                registerDate: '2024-03-20',
                status: 1,
                email: 'user1@example.com'
            }
        ];
        total.value = 1;
    } catch (error) {
        ElMessage.error('获取用户列表失败');
    } finally {
        loading.value = false;
    }
};

// 搜索用户
const handleSearch = () => {
    page.value = 1;
    getUsers();
};

// 重新加载用户列表
const reloadUsers = () => {
    getUsers();
};

// 页码改变
const pageChange = (newPage) => {
    page.value = newPage;
    getUsers();
};

// 编辑用户
const handleEdit = (user) => {
    editingUser.value = { ...user };
    dialogVisible.value = true;
};

// 保存用户信息
const handleSave = async () => {
    try {
        // 这里替换为实际的API调用
        // await updateUser(editingUser.value);
        ElMessage.success('保存成功');
        dialogVisible.value = false;
        getUsers();
    } catch (error) {
        ElMessage.error('保存失败');
    }
};

// 更改用户状态
const handleStatusChange = async (user) => {
    const action = user.status === 1 ? '禁用' : '启用';
    try {
        await ElMessageBox.confirm(
            `确定要${action}该用户吗？`,
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        // 这里替换为实际的API调用
        // await updateUserStatus(user.uid, user.status === 1 ? 0 : 1);
        ElMessage.success(`${action}成功`);
        getUsers();
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error(`${action}失败`);
        }
    }
};

// 响应式布局
const changeWidth = () => {
    pagerCount.value = window.innerWidth < 480 ? 3 : 7;
};

onMounted(() => {
    changeWidth();
    getUsers();
    window.addEventListener('resize', changeWidth);
});

onUnmounted(() => {
    window.removeEventListener('resize', changeWidth);
});
</script>

<style scoped>
.user-table-card {
    height: calc(100vh - 96px);
    position: relative;
    overflow: hidden !important;
}

.v-table {
    --v-table-row-height: 80px;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    border-bottom: 1px solid #e7e7e7;
    padding: 0 20px;
}

.search-bar {
    display: flex;
    gap: 10px;
}

.search-input {
    width: 300px;
}

.top-right {
    display: flex;
    gap: 20px;
}

.refresh {
    cursor: pointer;
    color: var(--brand_blue);
}

.refresh:hover {
    color: var(--Lb6);
}

/* 复用其他样式 */
.v-table__wrapper {
    height: calc(100% - 150px);
    overflow-y: auto;
}

.no-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
}

.v-table-page {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .search-input {
        width: 200px;
    }

    .top {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 10px;
    }

    .search-bar {
        width: 100%;
    }

    .top-right {
        width: 100%;
        justify-content: flex-end;
    }
}
</style>